<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度瀑布流</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .col-flex {
            display: flex;
            width: 80%;
            margin: 0 auto;
            gap: 16px;
        }

        .col-flex .item {
            flex: 1;
        }

        .col-flex .item a {
            border-radius: 18px;
            overflow: hidden;
            display: block;
            width: 100%;
            margin-bottom: 10px;
        }

        .col-flex .item a img {
            width: 100%;
            display: block;
        }
    </style>
</head>

<body>
    <div class="col-flex">
        <div class="item">
            <a href="#"><img src="../img/c1.webp" alt=""></a>
            <a href="#"><img src="../img/c2.webp" alt=""></a>
            <a href="#"><img src="../img/c3.webp" alt=""></a>
            <a href="#"><img src="../img/c4.webp" alt=""></a>
            <a href="#"><img src="../img/c5.webp" alt=""></a>
            <a href="#"><img src="../img/c6.webp" alt=""></a>
            <a href="#"><img src="../img/c7.webp" alt=""></a>
            <a href="#"><img src="../img/c8.webp" alt=""></a>
            <a href="#"><img src="../img/c9.webp" alt=""></a>
            <a href="#"><img src="../img/c10.webp" alt=""></a>
        </div>
        <div class="item">
            <a href="#"><img src="../img/c2-1.webp" alt=""></a>
            <a href="#"><img src="../img/c2-2.webp" alt=""></a>
            <a href="#"><img src="../img/c2-3.webp" alt=""></a>
            <a href="#"><img src="../img/c2-4.webp" alt=""></a>
            <a href="#"><img src="../img/c2-5.webp" alt=""></a>
            <a href="#"><img src="../img/c2-6.webp" alt=""></a>
            <a href="#"><img src="../img/c2-7.webp" alt=""></a>
            <a href="#"><img src="../img/c2-8.webp" alt=""></a>
        </div>
        <div class="item">
            <a href="#"><img src="../img/c3-1.webp" alt=""></a>
            <a href="#"><img src="../img/c3-2.webp" alt=""></a>
            <a href="#"><img src="../img/c3-3.webp" alt=""></a>
            <a href="#"><img src="../img/c3-4.webp" alt=""></a>
            <a href="#"><img src="../img/c3-5.webp" alt=""></a>
        </div>
        <div class="item">
            <a href="#"><img src="../img/c4-1.webp" alt=""></a>
            <a href="#"><img src="../img/c4-2.webp" alt=""></a>
            <a href="#"><img src="../img/c4-3.webp" alt=""></a>
            <a href="#"><img src="../img/c4-4.webp" alt=""></a>
            <a href="#"><img src="../img/c4-5.webp" alt=""></a>
            <a href="#"><img src="../img/c4-6.webp" alt=""></a>
            <a href="#"><img src="../img/c4-7.webp" alt=""></a>
        </div>
        <div class="item">
            <a href="#"><img src="../img/c5-1.webp" alt=""></a>
            <a href="#"><img src="../img/c5-2.webp" alt=""></a>
            <a href="#"><img src="../img/c5-3.webp" alt=""></a>
            <a href="#"><img src="../img/c5-4.webp" alt=""></a>
            <a href="#"><img src="../img/c5-5.webp" alt=""></a>
            <a href="#"><img src="../img/c5-6.webp" alt=""></a>
            <a href="#"><img src="../img/c5-7.webp" alt=""></a>
            <a href="#"><img src="../img/c5-8.webp" alt=""></a>
            <a href="#"><img src="../img/c5-9.webp" alt=""></a>
            <a href="#"><img src="../img/c5-10.webp" alt=""></a>
        </div>
    </div>
</body>

</html>